:root{
    --charcoal:#2b2f32;
    --muted:#8a929b;
    --border:#eceef1;
    --page-bg:#f7f8fa;
    --purple:#7b61ff;
    --purple-bg:#efeafe;
    --green:#1fa15c;
    --green-bg:#e6f7ec;
    --orange:#f5a623;
    --orange-bg:#fdf1de;
    --blue:#3d7bf7;
    --blue-bg:#e9f0fe;
    --red:#e8543e;
  }
  *{font-family:'Inter',sans-serif;}
  body{background:var(--page-bg); color:var(--charcoal);}
  a{text-decoration:none;}

  /* Header */
  .page-title{font-weight:800; font-size:1.6rem; color:var(--charcoal); margin-bottom:2px;}
  .breadcrumb-custom{font-size:.85rem; color:var(--muted);}
  .breadcrumb-custom a{color:var(--muted);}
  .breadcrumb-custom .active-crumb{color:var(--charcoal); font-weight:500;}

  /* Stat cards */
  .stat-card{
    border-radius:16px;
    border:1px solid var(--border);
    padding:18px 20px;
    background:#fff;
    display:flex;
    align-items:flex-start;
    gap:14px;
    height:100%;
  }
  .stat-card.bg-purple-soft{background:var(--purple-bg); border-color:var(--purple-bg);}
  .stat-card.bg-green-soft{background:var(--green-bg); border-color:var(--green-bg);}
  .stat-card.bg-orange-soft{background:var(--orange-bg); border-color:var(--orange-bg);}
  .stat-card.bg-blue-soft{background:var(--blue-bg); border-color:var(--blue-bg);}
  .stat-icon{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; flex-shrink:0;
  }
  .stat-icon.purple{background:#fff; color:var(--purple);}
  .stat-icon.green{background:#fff; color:var(--green);}
  .stat-icon.orange{background:#fff; color:var(--orange);}
  .stat-icon.blue{background:#fff; color:var(--blue);}
  .stat-label{font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:2px;}
  .stat-value{font-size:1.5rem; font-weight:800; line-height:1.1;}
  .stat-sub{font-size:.78rem; color:var(--muted); margin-top:2px;}

  /* Card container */
  .panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
  }

  /* Tabs */
  .challenge-tabs{border-bottom:1px solid var(--border);}
  .challenge-tabs .nav-link{
    color:var(--muted); font-weight:600; font-size:.92rem;
    border:none; padding:14px 4px; margin-right:26px;
    border-bottom:2px solid transparent; border-radius:0;
  }
  .challenge-tabs .nav-link.active{
    color:var(--purple); border-bottom-color:var(--purple); background:transparent;
  }
  .challenge-rules-link{color:var(--purple); font-size:.85rem; font-weight:600; white-space:nowrap;}

  /* Filters */
  .filter-select{
    border-radius:10px; border:1px solid var(--border);
    font-size:.85rem; color:var(--charcoal); font-weight:500;
  }
  .filter-select:focus{box-shadow:none; border-color:var(--purple);}

  /* Challenge item */
  .challenge-item{
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    margin-bottom:14px;
  }
  .challenge-icon{
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0;
  }
  .challenge-title{font-weight:700; font-size:.95rem; margin-bottom:2px;}
  .challenge-desc{font-size:.8rem; color:var(--muted); margin-bottom:6px;}
  .challenge-tag{font-size:.75rem; color:var(--muted);}
  .col-heading{font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;}
  .progress-thin{height:6px; border-radius:10px; background:#eef0f2;}
  .progress-thin .progress-bar{border-radius:10px;}
  .progress-text{font-size:.82rem; font-weight:600;}
  .reward-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; font-size:.88rem;
  }
  .coin-dot{
    width:22px; height:22px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-size:.7rem;
  }
  .ends-in{font-size:.78rem; font-weight:600;}
  .btn-view-details{
    border:1px solid var(--purple); color:var(--purple);
    font-size:.8rem; font-weight:600; border-radius:8px;
    padding:5px 14px; background:#fff;
  }
  .btn-view-details:hover{background:var(--purple); color:#fff;}
  .showing-text{font-size:.8rem; color:var(--muted);}

  /* Sidebar */
  .sidebar-card{
    background:#fff; border:1px solid var(--border);
    border-radius:16px; padding:18px;
  }
  .sidebar-title{font-weight:700; font-size:.95rem; margin-bottom:14px;}
  .how-step{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;}
  .how-step:last-child{margin-bottom:0;}
  .how-icon{
    width:34px; height:34px; border-radius:10px; background:var(--purple-bg);
    color:var(--purple); display:flex; align-items:center; justify-content:center;
    font-size:.95rem; flex-shrink:0;
  }
  .how-step-title{font-size:.85rem; font-weight:600; margin-bottom:1px;}
  .how-step-desc{font-size:.76rem; color:var(--muted); line-height:1.3;}

  .streak-card{background:var(--green-bg); border:1px solid var(--green-bg); border-radius:16px; padding:18px;}
  .streak-title{font-weight:700; font-size:.95rem;}
  .streak-sub{font-size:.78rem; color:var(--muted); margin-bottom:14px;}
  .streak-days{display:flex; justify-content:space-between; margin-bottom:16px;}
  .streak-day{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); font-weight:600;}
  .streak-check{
    width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; color:#fff; background:var(--green);
  }
  .streak-check.today{background:#fff; border:2px solid var(--green); color:var(--green);}
  .streak-check.pending{background:#fff; border:1.5px solid #d5dadd; color:transparent;}
  .streak-stats{display:flex; justify-content:space-between; border-top:1px solid rgba(0,0,0,.06); padding-top:12px;}
  .streak-stat-label{font-size:.72rem; color:var(--muted); font-weight:600;}
  .streak-stat-value{font-size:1.1rem; font-weight:800;}

  .special-card{
    background:linear-gradient(135deg,#5b3fd4,#3a2496);
    border-radius:16px; padding:20px; color:#fff; position:relative; overflow:hidden;
  }
  .exclusive-badge{
    background:rgba(255,255,255,.18); font-size:.68rem; font-weight:700;
    padding:4px 10px; border-radius:20px; letter-spacing:.02em;
  }
  .special-title{font-weight:700; font-size:.95rem; margin:12px 0 6px;}
  .special-desc{font-size:.8rem; opacity:.85; margin-bottom:14px; line-height:1.4;}
  .special-coins{font-size:1.6rem; font-weight:800;}
  .special-coins-label{font-size:.75rem; opacity:.8;}
  .trophy-wrap{
    position:absolute; right:14px; top:44px; font-size:3.2rem; opacity:.95;
  }
  .btn-view-challenge{
    background:#fff; color:#3a2496; font-weight:700; font-size:.85rem;
    border-radius:10px; padding:8px 0; width:100%; border:none;
  }

  @media (max-width: 767.98px){
    .challenge-item .row > div{margin-bottom:8px;}
    .challenge-item .row > div:last-child{margin-bottom:0;}
    .trophy-wrap{font-size:2.6rem; top:50px; right:16px;}
  }