/* ════════════════════════════════
   Customer Portal — Redesigned v2
   وی‌مارکت — پورتال مشتری
════════════════════════════════ */
:root {
    --P: #7B3AED; --Pd: #5B21B6; --Pl: #F5F0FF;
    --bg: #F4F3F8; --surf: #fff;
    --brd: #E8E4F2; --brd2: #D5CFEC;
    --t1: #18142E; --t2: #45405F; --t3: #9490A8; --t4: #C5C0D8;
    --ok: #10B981; --okl: #ECFDF5; --okb: #A7F3D0;
    --er: #EF4444; --erl: #FEF2F2; --erb: #FCA5A5;
    --am: #F59E0B; --aml: #FFFBEB;
    --radius: 16px; --radius-sm: 10px;
    --shadow: 0 2px 12px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
    --gold: #F59E0B; --silver: #9CA3AF; --bronze: #C2410C;
    --glass: rgba(255,255,255,.12);
    --glass-border: rgba(255,255,255,.22);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'YekanBakh',Tahoma,sans-serif;
    background:var(--bg); color:var(--t1); direction:rtl;
    min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ── SVG Icon Helper ── */
.cp-icon-svg { display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ════════════════════════
   Navbar
════════════════════════ */
.cp-nav {
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--brd);
    position:sticky; top:0; z-index:100;
}
.cp-nav-inner {
    max-width:900px; margin:0 auto;
    padding:0 20px; height:56px;
    display:flex; align-items:center; gap:14px;
}
.cp-nav-logo { display:flex; align-items:center; }
.cp-nav-logo img { height:30px; }
.cp-nav-title { font-size:.88rem; font-weight:700; color:var(--t2); flex:1; }
.cp-nav-user { font-size:.8rem; color:var(--t3); display:flex; align-items:center; gap:10px; }
.cp-nav-user-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-logout-btn {
    background:none; border:1.5px solid var(--brd2); color:var(--t3);
    padding:6px 14px; border-radius:10px; cursor:pointer;
    font-size:.78rem; font-family:inherit; transition:all .2s;
    display:inline-flex; align-items:center; gap:5px;
}
.cp-logout-btn:hover { border-color:var(--er); color:var(--er); background:var(--erl); }

/* ════════════════════════
   Layout
════════════════════════ */
.cp-wrap { max-width:900px; margin:0 auto; padding:20px 16px 80px; }

/* ════════════════════════
   Login Box
════════════════════════ */
.cp-login { max-width:400px; margin:40px auto 0; }
.cp-login-card {
    background:var(--surf); border-radius:24px;
    border:1px solid var(--brd); box-shadow:var(--shadow-lg); overflow:hidden;
}
.cp-login-header {
    background:linear-gradient(145deg,#6D28D9 0%,#8B5CF6 50%,#A855F7 100%);
    padding:36px 28px 28px; text-align:center;
    position:relative; overflow:hidden;
}
.cp-login-header::before {
    content:''; position:absolute; width:180px; height:180px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-60px; right:-40px;
}
.cp-login-header::after {
    content:''; position:absolute; width:120px; height:120px; border-radius:50%;
    background:rgba(255,255,255,.04); bottom:-30px; left:-20px;
}
.cp-login-logo { height:44px; margin-bottom:14px; position:relative; z-index:1; }
.cp-login-header h2 { color:#fff; font-size:1.2rem; font-weight:800; margin-bottom:6px; position:relative; z-index:1; }
.cp-login-header p { color:rgba(255,255,255,.7); font-size:.84rem; position:relative; z-index:1; }
.cp-login-body { padding:28px; }

/* ── Steps ── */
.cp-step { display:none; }
.cp-step.active { display:block; }
.cp-step-label {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.72rem; font-weight:700; color:var(--P);
    background:rgba(123,58,237,.08); padding:4px 14px; border-radius:20px; margin-bottom:14px;
}
.cp-step h3 { font-size:1.05rem; font-weight:800; margin-bottom:4px; }
.cp-step p { font-size:.84rem; color:var(--t3); margin-bottom:18px; line-height:1.6; }

/* ── Form ── */
.cp-field { margin-bottom:16px; }
.cp-field label { display:block; font-size:.82rem; font-weight:600; color:var(--t2); margin-bottom:7px; }
.cp-field input, .cp-field textarea {
    width:100%; padding:14px 16px;
    border:1.5px solid var(--brd2); border-radius:12px;
    font-size:1rem; font-family:inherit; color:var(--t1);
    background:var(--bg); transition:all .2s; outline:none;
}
.cp-field input { direction:ltr; text-align:right; letter-spacing:1.5px; }
.cp-field textarea { direction:rtl; min-height:90px; resize:vertical; line-height:1.6; }
.cp-field input:focus, .cp-field textarea:focus { border-color:var(--P); background:#fff; box-shadow:0 0 0 4px rgba(123,58,237,.08); }

.cp-btn {
    width:100%; padding:14px;
    background:linear-gradient(135deg,var(--P),#8B5CF6);
    color:#fff; border:none; border-radius:14px;
    font-size:.95rem; font-weight:700; font-family:inherit;
    cursor:pointer; transition:all .25s;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.cp-btn:hover:not(:disabled) { background:linear-gradient(135deg,var(--Pd),var(--P)); transform:translateY(-1px); box-shadow:0 8px 24px rgba(123,58,237,.3); }
.cp-btn:active:not(:disabled) { transform:translateY(0); }
.cp-btn:disabled { opacity:.5; cursor:not-allowed; }
.cp-btn-sm { padding:9px 20px; font-size:.86rem; width:auto; border-radius:12px; display:inline-flex; align-items:center; gap:6px; }
.cp-btn-outline { background:transparent; border:1.5px solid var(--P); color:var(--P); box-shadow:none; }
.cp-btn-outline:hover { background:var(--Pl); box-shadow:none; transform:none; }

/* OTP inputs */
.cp-otp-wrap { display:flex; gap:10px; justify-content:center; margin-bottom:16px; flex-direction:row-reverse; }
.cp-otp-input {
    width:54px; height:58px; border:1.5px solid var(--brd2); border-radius:14px;
    text-align:center; font-size:1.4rem; font-weight:800; color:var(--P);
    background:var(--bg); font-family:inherit; outline:none; transition:all .2s;
}
.cp-otp-input:focus { border-color:var(--P); background:#fff; box-shadow:0 0 0 4px rgba(123,58,237,.08); }
.cp-otp-input.filled { border-color:var(--P); background:var(--Pl); }
.cp-otp-timer { text-align:center; font-size:.82rem; color:var(--t3); margin-bottom:12px; }
.cp-otp-timer button { background:none; border:none; color:var(--P); cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:600; }

/* Alerts */
.cp-error { background:var(--erl); border:1px solid var(--erb); color:var(--er); border-radius:10px; padding:10px 14px; font-size:.84rem; margin-top:12px; display:none; line-height:1.6; }
.cp-error.show { display:block; }
.cp-success { background:var(--okl); border:1px solid var(--okb); color:#065F46; border-radius:10px; padding:10px 14px; font-size:.84rem; margin-top:12px; display:none; line-height:1.6; }
.cp-success.show { display:block; }

/* ════════════════════════
   Wallet Card
════════════════════════ */
.cp-wallet {
    background:linear-gradient(145deg,#6D28D9 0%,#7C3AED 40%,#9333EA 80%,#A855F7 100%);
    border-radius:22px; padding:24px 22px; color:#fff;
    margin-bottom:18px; position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(109,40,217,.28);
}
.cp-wallet::before {
    content:''; position:absolute; width:220px; height:220px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-80px; left:-60px;
}
.cp-wallet::after {
    content:''; position:absolute; width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,.04); bottom:-50px; right:-40px;
}
.cp-wallet-head { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.cp-wallet-name {
    font-size:.95rem; opacity:.9; margin-bottom:4px;
    display:flex; align-items:center; gap:8px; font-weight:600;
}
.cp-edit-name-btn {
    background:var(--glass); border:1px solid var(--glass-border);
    color:#fff; width:26px; height:26px; border-radius:8px;
    cursor:pointer; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .2s; backdrop-filter:blur(4px);
}
.cp-edit-name-btn:hover { background:rgba(255,255,255,.25); }
.cp-wallet-phone { font-size:.8rem; opacity:.55; direction:ltr; font-variant-numeric:tabular-nums; }
.cp-wallet-badge {
    background:var(--glass); border:1px solid var(--glass-border);
    padding:5px 14px; border-radius:10px; font-size:.76rem; font-weight:600;
    backdrop-filter:blur(4px);
    display:inline-flex; align-items:center; gap:6px;
}
.cp-wallet-balance { margin-top:22px; position:relative; z-index:1; }
.cp-wallet-lbl { font-size:.78rem; opacity:.6; margin-bottom:6px; letter-spacing:.3px; }
.cp-wallet-amount { font-size:2rem; font-weight:800; letter-spacing:.5px; }
.cp-wallet-amount.negative { color:#FCA5A5; }
.cp-wallet-unit { font-size:.85rem; opacity:.6; margin-right:6px; }
.cp-wallet-points {
    margin-top:16px; font-size:.82rem; opacity:.7; position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--glass); border:1px solid var(--glass-border);
    padding:6px 14px; border-radius:10px;
    backdrop-filter:blur(4px);
}

/* ════════════════════════
   Tabs
════════════════════════ */
.cp-tabs {
    display:flex; gap:0; background:var(--surf);
    border-radius:14px; border:1px solid var(--brd);
    padding:4px; margin-bottom:18px;
    box-shadow:var(--shadow);
}
.cp-tab {
    flex:1; padding:10px 4px; text-align:center; border-radius:10px;
    font-size:.78rem; font-weight:600; color:var(--t3); cursor:pointer;
    border:none; background:none; font-family:inherit; transition:all .25s;
    white-space:nowrap;
    display:flex; flex-direction:column; align-items:center; gap:3px;
}
.cp-tab .cp-icon-svg { transition:all .25s; }
.cp-tab.active {
    background:linear-gradient(135deg,var(--P),#8B5CF6); color:#fff;
    box-shadow:0 4px 14px rgba(123,58,237,.3);
}
.cp-tab:not(.active):hover { background:var(--Pl); color:var(--P); }

/* Tab Content */
.cp-tab-content { display:none; }
.cp-tab-content.active { display:block; animation:fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ════════════════════════
   Transactions List
════════════════════════ */
.cp-tx-list { display:flex; flex-direction:column; gap:8px; }
.cp-tx-item {
    background:var(--surf); border:1px solid var(--brd);
    border-radius:14px; padding:14px 16px;
    display:flex; align-items:center; gap:12px;
    transition:all .15s;
}
.cp-tx-item:active { transform:scale(.99); }
.cp-tx-icon {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.cp-tx-icon.in  { background:var(--okl); color:var(--ok); }
.cp-tx-icon.out { background:var(--erl); color:var(--er); }
.cp-tx-info { flex:1; min-width:0; }
.cp-tx-desc { font-size:.86rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-tx-date { font-size:.74rem; color:var(--t3); margin-top:3px; }
.cp-tx-amount { font-size:.92rem; font-weight:800; flex-shrink:0; font-variant-numeric:tabular-nums; }
.cp-tx-amount.in  { color:var(--ok); }
.cp-tx-amount.out { color:var(--er); }

/* ════════════════════════
   Invoice List
════════════════════════ */
.cp-inv-list { display:flex; flex-direction:column; gap:10px; }
.cp-inv-item {
    background:var(--surf); border:1px solid var(--brd);
    border-radius:var(--radius); padding:16px;
    cursor:pointer; transition:all .25s;
}
.cp-inv-item:hover { border-color:rgba(123,58,237,.25); box-shadow:0 4px 16px rgba(123,58,237,.08); }
.cp-inv-item:active { transform:scale(.99); }
.cp-inv-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.cp-inv-num { font-size:.88rem; font-weight:800; color:var(--P); display:flex; align-items:center; gap:5px; }
.cp-inv-date { font-size:.76rem; color:var(--t3); }
.cp-inv-shop {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.74rem; background:var(--Pl); color:var(--P);
    border:1px solid rgba(123,58,237,.12); padding:3px 10px; border-radius:8px; font-weight:600;
}
.cp-inv-amount { font-size:1.02rem; font-weight:800; color:var(--t1); font-variant-numeric:tabular-nums; }
.cp-inv-amount small { font-size:.72rem; color:var(--t3); font-weight:400; margin-right:3px; }
.cp-inv-foot {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--brd);
}
.cp-inv-items-count { font-size:.76rem; color:var(--t3); display:flex; align-items:center; gap:4px; }
.cp-pay-badge {
    font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:8px;
    display:inline-flex; align-items:center; gap:4px;
}
.cp-pay-badge.cash    { background:var(--okl);  color:#065F46; border:1px solid var(--okb); }
.cp-pay-badge.card    { background:var(--Pl);   color:var(--P); border:1px solid rgba(123,58,237,.15); }
.cp-pay-badge.credit  { background:var(--erl);  color:var(--er); border:1px solid var(--erb); }
.cp-pay-badge.wallet  { background:var(--aml);  color:#78350F; border:1px solid #FDE68A; }
.cp-pay-badge.mixed   { background:#F3F4F6;     color:#374151; border:1px solid #E5E7EB; }

/* ════════════════════════
   Modal (slide up)
════════════════════════ */
.cp-modal-bg {
    position:fixed; inset:0;
    background:rgba(10,4,24,.55);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:1000; display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s;
}
.cp-modal-bg.open { opacity:1; pointer-events:auto; }
.cp-modal {
    background:var(--bg); border-radius:24px 24px 0 0;
    width:100%; max-width:900px; max-height:92vh;
    overflow-y:auto;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.32,.72,0,1);
    padding-bottom:env(safe-area-inset-bottom, 20px);
}
.cp-modal-bg.open .cp-modal { transform:translateY(0); }
.cp-modal-handle { width:36px; height:4px; background:var(--brd2); border-radius:2px; margin:12px auto 0; }
.cp-modal-inner { padding:0 20px 24px; }

/* Close btn */
.cp-close-btn { position:sticky; top:0; z-index:10; display:flex; justify-content:flex-end; padding:10px 16px 0; background:var(--bg); }
.cp-close-btn button {
    background:var(--surf); border:1px solid var(--brd);
    width:34px; height:34px; border-radius:10px;
    cursor:pointer; font-size:.9rem; color:var(--t3);
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.cp-close-btn button:hover { background:var(--erl); color:var(--er); border-color:var(--erb); }

/* Invoice Detail */
.cp-inv-detail-header {
    background:linear-gradient(145deg,#6D28D9,#8B5CF6,#A855F7);
    border-radius:18px; padding:22px 20px; color:#fff; margin:16px 0;
    position:relative; overflow:hidden;
}
.cp-inv-detail-header::before {
    content:''; position:absolute; width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-50px; left:-30px;
}
.cp-inv-d-num { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:6px; position:relative; z-index:1; }
.cp-inv-d-shop { font-size:.86rem; opacity:.75; margin-top:4px; display:flex; align-items:center; gap:5px; position:relative; z-index:1; }
.cp-inv-d-date { font-size:.8rem; opacity:.65; margin-top:8px; display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
.cp-inv-d-status {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--glass); border:1px solid var(--glass-border);
    padding:4px 14px; border-radius:10px; font-size:.78rem; font-weight:700;
    margin-top:10px; position:relative; z-index:1;
}

.cp-inv-section { background:var(--surf); border:1px solid var(--brd); border-radius:14px; overflow:hidden; margin-bottom:10px; }
.cp-inv-section-head {
    padding:12px 16px; border-bottom:1px solid var(--brd); background:var(--bg);
    font-size:.82rem; font-weight:700; color:var(--t2);
    display:flex; align-items:center; gap:8px;
}
.cp-inv-section-head svg { color:var(--P); }

.cp-items-table { width:100%; border-collapse:collapse; }
.cp-items-table th { padding:9px 14px; font-size:.74rem; font-weight:700; color:var(--t3); text-align:right; border-bottom:1px solid var(--brd); background:var(--bg); }
.cp-items-table td { padding:11px 14px; font-size:.84rem; border-bottom:1px solid var(--brd); }
.cp-items-table tr:last-child td { border:none; }
.cp-item-name { font-weight:700; color:var(--t1); }
.cp-item-unit { font-size:.72rem; color:var(--t3); }

.cp-tot-row { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid var(--brd); font-size:.86rem; }
.cp-tot-row:last-child { border:none; }
.cp-tot-lbl { color:var(--t2); }
.cp-tot-val { font-weight:700; color:var(--t1); }
.cp-tot-row.grand { background:linear-gradient(135deg,var(--Pl),#f0ebff); padding:14px 16px; }
.cp-tot-row.grand .cp-tot-lbl { color:var(--P); font-weight:700; font-size:.92rem; }
.cp-tot-row.grand .cp-tot-val { color:var(--P); font-size:1.08rem; font-weight:800; }

.cp-pay-list { display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px; }
.cp-pay-chip { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px; font-size:.82rem; font-weight:600; border:1.5px solid; }
.cp-pay-chip.cash   { background:var(--okl); color:#065F46; border-color:var(--okb); }
.cp-pay-chip.card   { background:var(--Pl);  color:var(--P); border-color:#DDD6FE; }
.cp-pay-chip.credit { background:var(--erl); color:var(--er); border-color:var(--erb); }
.cp-pay-chip.wallet { background:var(--aml); color:#78350F; border-color:#FDE68A; }
.cp-pay-chip.mixed  { background:#F3F4F6;    color:#374151; border-color:#E5E7EB; }

/* ════════════════════════
   Empty & Loading States
════════════════════════ */
.cp-empty { text-align:center; padding:48px 16px; color:var(--t3); }
.cp-empty-icon { margin-bottom:14px; display:flex; justify-content:center; }
.cp-empty-icon svg { color:var(--t4); }
.cp-empty p { font-size:.88rem; line-height:1.6; }

.cp-loading { text-align:center; padding:32px; color:var(--t3); font-size:.88rem; display:flex; flex-direction:column; align-items:center; gap:10px; }
.cp-spinner {
    width:28px; height:28px; border:3px solid var(--brd2);
    border-top-color:var(--P); border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════
   CAMPAIGN — Hero, Rank, Leaderboard, Missions
════════════════════════════════════════════ */

/* Hero */
.cp-camp-hero {
    background:linear-gradient(145deg,#6D28D9 0%,#8B5CF6 40%,#A855F7 80%,#C084FC 100%);
    border-radius:22px; padding:22px 20px; color:#fff; margin-bottom:16px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(109,40,217,.25);
}
.cp-camp-hero::before {
    content:''; position:absolute; width:240px; height:240px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-100px; left:-80px;
}
.cp-camp-hero::after {
    content:''; position:absolute; width:180px; height:180px; border-radius:50%;
    background:rgba(255,255,255,.04); bottom:-60px; right:-40px;
}
.cp-ch-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; position:relative; z-index:1; margin-bottom:16px; }
.cp-ch-title { font-size:1.1rem; font-weight:800; line-height:1.4; display:flex; align-items:center; gap:8px; }
.cp-ch-sub { font-size:.76rem; opacity:.7; margin-top:5px; }
.cp-ch-days {
    background:var(--glass); border:1.5px solid var(--glass-border);
    border-radius:12px; padding:6px 14px; text-align:center; min-width:68px;
    backdrop-filter:blur(6px);
}
.cp-ch-days-num { font-size:1.2rem; font-weight:800; line-height:1.1; }
.cp-ch-days-lbl { font-size:.64rem; opacity:.7; margin-top:2px; }

.cp-ch-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; position:relative; z-index:1; }
.cp-ch-stat {
    background:var(--glass); backdrop-filter:blur(6px);
    border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 6px; text-align:center;
}
.cp-ch-stat-val { font-size:1.15rem; font-weight:800; }
.cp-ch-stat-lbl { font-size:.66rem; opacity:.7; margin-top:2px; }

/* My rank card */
.cp-my-rank-card {
    background:var(--surf); border:1.5px solid var(--brd); border-radius:16px;
    padding:14px 16px; margin-bottom:14px;
    display:flex; align-items:center; gap:14px;
    box-shadow:var(--shadow);
}
.cp-my-rank-badge {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; font-weight:800; color:#fff;
    background:linear-gradient(145deg,var(--P),#A855F7);
    box-shadow:0 4px 14px rgba(123,58,237,.3); flex-shrink:0;
}
.cp-my-rank-info { flex:1; min-width:0; }
.cp-my-rank-info .lbl { font-size:.72rem; color:var(--t3); margin-bottom:2px; }
.cp-my-rank-info .val { font-size:.98rem; font-weight:800; color:var(--t1); }
.cp-my-rank-info .sub { font-size:.72rem; color:var(--t3); margin-top:3px; font-variant-numeric:tabular-nums; }
.cp-my-rank-pts { text-align:left; flex-shrink:0; }
.cp-my-rank-pts .v { font-size:1.5rem; font-weight:800; color:var(--P); line-height:1; }
.cp-my-rank-pts .l { font-size:.68rem; color:var(--t3); margin-top:3px; }

.cp-my-not-ranked {
    background:linear-gradient(135deg,#FFF7ED,#FFEDD5);
    border:1.5px solid #FED7AA; border-radius:14px;
    padding:14px 16px; margin-bottom:14px;
    font-size:.84rem; color:#9A3412; line-height:1.7;
    display:flex; align-items:center; gap:12px;
}
.cp-my-not-ranked svg { flex-shrink:0; color:#F59E0B; }

/* Section header */
.cp-sec-title {
    font-size:.9rem; font-weight:800; color:var(--t1);
    margin:20px 2px 12px; display:flex; align-items:center; gap:8px;
}
.cp-sec-title svg { color:var(--P); }
.cp-sec-title-sub { font-size:.72rem; font-weight:500; color:var(--t3); }

/* ── Leaderboard ── */
.cp-lb-scroll {
    background:var(--surf); border:1.5px solid var(--brd); border-radius:16px;
    overflow-y:auto; overflow-x:hidden; box-shadow:var(--shadow);
    max-height:68vh; min-height:300px;
    scrollbar-width:thin; scrollbar-color:var(--brd2) transparent;
}
.cp-lb-scroll::-webkit-scrollbar { width:5px; }
.cp-lb-scroll::-webkit-scrollbar-track { background:transparent; }
.cp-lb-scroll::-webkit-scrollbar-thumb { background:var(--brd2); border-radius:3px; }

.cp-lb-row {
    display:grid; grid-template-columns:42px 1fr auto; gap:12px;
    padding:12px 16px; border-bottom:1px solid var(--brd);
    align-items:center; transition:background .15s;
}
.cp-lb-row:last-child { border-bottom:none; }
.cp-lb-row:hover { background:#FBFAFF; }
.cp-lb-row.me {
    background:linear-gradient(90deg,#F5F0FF,#EDE5FF);
    border-right:3px solid var(--P);
}
.cp-lb-row.me:hover { background:linear-gradient(90deg,#EDE5FF,#E6D9FF); }

.cp-lb-divider {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 14px;
    background:linear-gradient(135deg,var(--Pl),#FAF5FF);
    border-top:1.5px solid var(--brd2); border-bottom:1px solid var(--brd);
    position:sticky; top:0; z-index:2;
}
.cp-lb-divider:first-child { border-top:none; }
.cp-lb-divider.my-tier { background:linear-gradient(135deg,#FFF7ED,#FFEDD5); border-color:#FED7AA; }
.cp-lb-div-medal { font-size:1.3rem; flex-shrink:0; line-height:1; margin-top:2px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.1)); }
.cp-lb-div-main { flex:1; min-width:0; }
.cp-lb-div-title { font-size:.86rem; font-weight:800; color:var(--P); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.cp-lb-divider.my-tier .cp-lb-div-title { color:#9A3412; }
.cp-lb-div-range { font-weight:500; opacity:.85; }
.cp-lb-div-prize { font-size:.76rem; color:var(--t2); line-height:1.5; }
.cp-lb-divider.my-tier .cp-lb-div-prize { color:#7C2D12; }
.cp-lb-div-sub { font-size:.68rem; color:var(--t3); }
.cp-lb-divider.my-tier .cp-lb-div-sub { color:#9A3412; opacity:.7; }
.cp-lb-div-me-badge {
    background:var(--am); color:#fff;
    padding:2px 10px; border-radius:8px;
    font-size:.65rem; font-weight:800;
    box-shadow:0 2px 6px rgba(245,158,11,.35);
    animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%,100% { box-shadow:0 2px 6px rgba(245,158,11,.35); }
    50%     { box-shadow:0 2px 10px rgba(245,158,11,.65); }
}
.cp-lb-empty-tier {
    padding:14px 16px; text-align:center;
    font-size:.78rem; color:var(--t3); font-style:italic;
    background:#FBFAFF; border-bottom:1px solid var(--brd);
}
.cp-lb-rank {
    width:34px; height:34px; border-radius:10px;
    background:var(--bg); border:1.5px solid var(--brd2);
    display:flex; align-items:center; justify-content:center;
    font-size:.86rem; font-weight:800; color:var(--t2);
}
.cp-lb-row.me .cp-lb-rank {
    background:var(--P); color:#fff; border-color:var(--P);
    box-shadow:0 2px 8px rgba(123,58,237,.3);
}
.cp-lb-info { min-width:0; }
.cp-lb-name { font-size:.88rem; font-weight:700; color:var(--t1); }
.cp-lb-name-me { color:var(--P); }
.cp-lb-name .me-tag {
    display:inline-block; background:var(--P); color:#fff;
    padding:1px 8px; border-radius:6px; font-size:.62rem;
    margin-right:6px; font-weight:700;
}
.cp-lb-sub { font-size:.7rem; color:var(--t3); margin-top:2px; font-variant-numeric:tabular-nums; }
.cp-lb-pts { font-size:1rem; font-weight:800; color:var(--P); font-variant-numeric:tabular-nums; }
.cp-lb-pts-l { font-size:.64rem; color:var(--t3); text-align:left; }

/* ── Missions ── */
.cp-mis-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cp-mis-card {
    background:var(--surf); border:1.5px solid var(--brd); border-radius:16px;
    padding:14px; box-shadow:var(--shadow); transition:all .2s;
    display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.cp-mis-card:hover { border-color:var(--brd2); }
.cp-mis-card.st-completed { background:linear-gradient(145deg,#F0FDF4,#ECFDF5); border-color:var(--okb); }
.cp-mis-card.st-pending   { background:linear-gradient(145deg,#FFFBEB,#FEF3C7); border-color:#FDE68A; }
.cp-mis-card.st-rejected  { background:#FFF1F2; border-color:var(--erb); opacity:.85; }

.cp-mis-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.cp-mis-icon {
    width:42px; height:42px; border-radius:12px;
    background:var(--Pl); display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; flex-shrink:0;
}
.cp-mis-card.st-completed .cp-mis-icon { background:var(--okl); }
.cp-mis-card.st-pending   .cp-mis-icon { background:#FEF3C7; }
.cp-mis-pts {
    background:linear-gradient(135deg,#FDE68A,#F59E0B); color:#78350F;
    padding:3px 10px; border-radius:8px; font-size:.72rem; font-weight:800;
    white-space:nowrap; box-shadow:0 2px 6px rgba(245,158,11,.2);
}

.cp-mis-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cp-mis-title { font-size:.86rem; font-weight:800; color:var(--t1); line-height:1.4; margin-bottom:4px; }
.cp-mis-desc { font-size:.74rem; color:var(--t2); line-height:1.6; white-space:pre-line; word-break:break-word; overflow-wrap:anywhere; }
.cp-mis-desc a { color:var(--P); text-decoration:underline; }
.cp-mis-hint { font-size:.68rem; color:var(--t3); margin-top:6px; font-variant-numeric:tabular-nums; }

.cp-mis-foot { margin-top:10px; padding-top:10px; border-top:1px solid var(--brd); display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.cp-mis-foot-note { font-size:.68rem; color:var(--t3); text-align:center; line-height:1.5; }

.cp-mis-badge {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    padding:5px 10px; border-radius:8px;
    font-size:.72rem; font-weight:700; width:100%;
}
.cp-mis-badge.available { background:var(--Pl); color:var(--P); border:1px solid rgba(123,58,237,.12); }
.cp-mis-badge.auto      { background:#E0E7FF; color:#4338CA; border:1px solid #C7D2FE; }
.cp-mis-badge.pending   { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
.cp-mis-badge.completed { background:var(--okl); color:#065F46; border:1px solid var(--okb); }
.cp-mis-badge.rejected  { background:var(--erl); color:var(--er); border:1px solid var(--erb); }

.cp-mis-claim-btn {
    background:linear-gradient(135deg,#7B3AED,#8B5CF6); color:#fff; border:none;
    padding:9px 14px; border-radius:12px;
    font-size:.78rem; font-weight:700; font-family:inherit;
    cursor:pointer; transition:.2s;
    box-shadow:0 3px 10px rgba(123,58,237,.25);
    width:100%; white-space:nowrap;
}
.cp-mis-claim-btn:hover { box-shadow:0 5px 16px rgba(123,58,237,.4); }
.cp-mis-claim-btn:active { transform:scale(.98); }
.cp-mis-card.st-available .cp-mis-claim-btn { animation:missionPulse 2.5s ease-in-out infinite; }
@keyframes missionPulse {
    0%,100% { box-shadow:0 3px 10px rgba(123,58,237,.25); }
    50%     { box-shadow:0 4px 18px rgba(123,58,237,.5); }
}

/* No campaign */
.cp-no-camp {
    background:var(--surf); border:1.5px solid var(--brd); border-radius:16px;
    padding:48px 20px; text-align:center;
}
.cp-no-camp-icon { margin-bottom:14px; display:flex; justify-content:center; }
.cp-no-camp h3 { font-size:1rem; color:var(--t2); margin-bottom:8px; font-weight:800; }
.cp-no-camp p  { font-size:.86rem; color:var(--t3); line-height:1.7; }

/* ════════════════════════
   Responsive
════════════════════════ */
@media (max-width: 480px) {
    .cp-wrap { padding:16px 12px 80px; }
    .cp-wallet { padding:20px 18px; border-radius:20px; }
    .cp-wallet-amount { font-size:1.7rem; }
    .cp-wallet-badge { font-size:.72rem; padding:4px 10px; }

    .cp-tabs { border-radius:12px; }
    .cp-tab { font-size:.72rem; padding:8px 2px; gap:3px; }

    .cp-inv-detail-header { padding:18px 16px; border-radius:16px; }
    .cp-items-table th, .cp-items-table td { padding:8px 10px; font-size:.8rem; }

    .cp-camp-hero { padding:18px 16px; border-radius:18px; }
    .cp-ch-title { font-size:.98rem; }
    .cp-ch-stat-val { font-size:1.05rem; }

    .cp-lb-scroll { max-height:60vh; }
    .cp-lb-row { padding:10px 12px; grid-template-columns:36px 1fr auto; gap:10px; }
    .cp-lb-rank { width:30px; height:30px; font-size:.78rem; }
    .cp-lb-name { font-size:.84rem; }
    .cp-lb-pts  { font-size:.92rem; }
    .cp-lb-divider { padding:10px 12px; }
    .cp-lb-div-title { font-size:.82rem; }
    .cp-lb-div-prize { font-size:.72rem; }

    .cp-mis-list { gap:8px; }
    .cp-mis-card { padding:12px; border-radius:14px; }
    .cp-mis-icon { width:38px; height:38px; font-size:1.1rem; }
    .cp-mis-title { font-size:.82rem; }
    .cp-mis-desc  { font-size:.72rem; }
    .cp-mis-pts   { font-size:.68rem; padding:2px 8px; }

    .cp-tx-item { padding:12px 14px; border-radius:12px; }
    .cp-tx-icon { width:38px; height:38px; border-radius:10px; }
    .cp-tx-desc { font-size:.84rem; }

    .cp-inv-item { padding:14px; }
    .cp-my-rank-card { padding:12px 14px; }
    .cp-my-rank-badge { width:44px; height:44px; font-size:1.15rem; border-radius:12px; }
    .cp-my-rank-pts .v { font-size:1.3rem; }
}

@media (max-width: 360px) {
    .cp-mis-list { grid-template-columns:1fr; }
    .cp-wallet-amount { font-size:1.5rem; }
    .cp-ch-stats { gap:6px; }
    .cp-ch-stat { padding:8px 4px; }
    .cp-ch-stat-val { font-size:.95rem; }
}