:root{ --kudo-brand:#672c86; --kudo-text:#fff; --kudo-text-dim:#d6d6e0; --kudo-divider:#ffffff80; --kudo-meta-sep:#00000060; --flag-size:34px; }
.kudo-hc-slider{ position:relative; width:100%; padding:0; background:transparent; }
.kudo-hc-slider .swiper-wrapper{ align-items:stretch; }
.kudo-hc-slider .swiper-slide{ width:auto; }

.kudo-hc-card{ width:150px; height:180px; background:var(--kudo-brand); color:var(--kudo-text);
  border-radius:16px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.16);
  display:flex; flex-direction:column; gap:8px; position:relative; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease; cursor:pointer;
}
.kudo-hc-card:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.22); background:#541874; }

.kudo-hc-header{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kudo-hc-name{ font-weight:800; font-size:16px; line-height:1.1; word-break:break-word; color:var(--kudo-text); }
.kudo-hc-mini-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.kudo-mini-chip{ background:#ffffff10; border:1px solid #ffffff40; border-radius:999px; font-size:10px; padding:2px 7px; font-weight:700; letter-spacing:.2px; display:inline-flex; align-items:center; color:#fff; }
.kudo-mini-chip .dot{ width:8px; height:8px; border-radius:50%; background:#31c24a; display:inline-block; margin-right:6px; }

.kudo-hc-midrow{ display:grid; grid-template-columns:var(--flag-size) 1px 1fr; align-items:center; gap:6px; }
.kudo-hc-flag{ width:var(--flag-size); height:var(--flag-size); border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.kudo-hc-flag img{ width:100%; height:100%; object-fit:cover; }
.kudo-hc-divider{ width:1px; background:var(--kudo-divider); align-self:stretch; }
.kudo-hc-data{ text-align:right; white-space:nowrap; }
.kudo-hc-data-inline{ line-height:1; font-weight:900; }
.kudo-hc-data-amount{ font-weight:900; font-size:20px; }

.kudo-hc-meta{ margin-top:auto; display:grid; grid-template-columns:1fr 1px 1fr; gap:6px; align-items:center; }
.kudo-hc-meta-col{ text-align:center; }
.kudo-hc-meta-value{ font-weight:800; font-size:16px; line-height:1.1; color:#fff; }
.kudo-hc-meta-label{ color:var(--kudo-text-dim); font-size:10px; }
.kudo-hc-meta-sep{ width:1px; height:18px; background:var(--kudo-meta-sep); }

.kudo-hc-nav{ position:absolute; inset:0; pointer-events:none; }
.kudo-hc-prev,.kudo-hc-next{
  position:absolute; top:44%; width:30px; height:30px; border-radius:50%;
  background: rgba(103,44,133,.55); pointer-events:all; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:4;
}
.kudo-hc-prev{ left:6px; } .kudo-hc-next{ right:6px; }
.kudo-hc-prev::after,.kudo-hc-next::after{
  content:''; display:block; width:30px; height:30px; background-position:center; background-repeat:no-repeat;
}
.kudo-hc-prev::after{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>'); }
.kudo-hc-next::after{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z"/></svg>'); }

.kudo-hc-empty{ background:transparent; padding:12px 16px; color:#333; border-radius:12px; }

/* Desktop */
@media (min-width: 1024px){
  :root{ --flag-size:44px; }
  .kudo-hc-card{ width:320px; height:270px; padding:16px; gap:12px; }
  .kudo-hc-name{ font-size:22px; }
  .kudo-hc-divider{ height:var(--flag-size); align-self:center; }
  .kudo-hc-data-amount{ font-size:40px; }
  .kudo-hc-meta{ gap:10px; }
  .kudo-hc-meta-value{ font-size:30px; }
  .kudo-hc-meta-label{ font-size:18px; }
}