/* Apple-inspired look */
:root{  --bg:#F6F7FB; --card:#FFFFFF; --text:#0F172A; --muted:#6B7280; --primary:#0E3B53; --ring:rgba(14,59,83,0.25); --shadow:0 8px 30px rgba(17,24,39,0.08); --radius:16px;  }
.hct-wrap, .hct-container{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--text); line-height:1.5; }
.hct-wrap{ padding:24px; background:var(--bg); }
.hct-title{ font-size:28px; margin:0 0 16px; }
.hct-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin:16px 0; }
.hct-grid, .hct-grid-2{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:900px){ .hct-grid{ grid-template-columns:1fr 1fr; } .hct-grid-2{ grid-template-columns:1fr 1.2fr; } }
.hct-flex{ display:flex; gap:12px; align-items:center; } .hct-flex.between{ justify-content:space-between; }

.hct-tabs{ display:flex; gap:8px; margin:12px 0 16px; flex-wrap:wrap; }
.hct-tab{ background:#eef2ff; border:1px solid #e5e7eb; border-radius:999px; padding:8px 14px; cursor:pointer; }
.hct-tab.active{ background:linear-gradient(180deg,#1a6d9a,#2393cf); border-color:#1a6d9a; box-shadow:inset 0 0 0 1px #2393cf; color:#fff; }
.hct-panel.hidden{ display:none; }

label{ display:block; font-size:14px; color:var(--muted); margin-bottom:8px; }
input, select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.02); margin-top:6px; outline:none; }
input:focus, select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); }

.hct-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hct-btn{ background:linear-gradient(180deg,#1a6d9a,#2393cf); border:1px solid #0E3B53; border-radius:12px; padding:10px 14px; color:#fff; box-shadow:var(--shadow); }
.hct-btn.ghost{ background:transparent; border-color:#1a6d9a; color:#0E3B53; box-shadow:none; }
.hct-btn.danger{ background:linear-gradient(180deg,#fee2e2,#fecaca); border-color:#fca5a5; color:#991b1b; }
.hct-btn.small{ padding:6px 10px; border-radius:10px; }

.hct-table{ width:100%; border-collapse:collapse; font-size:14px; }
.hct-table th, .hct-table td{ padding:10px 8px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.hct-table tbody tr:hover{ background:#f8fafc; }

.hct-hero{ background:linear-gradient(180deg,#f8fafc,#ecfeff); padding:18px; border-radius:var(--radius); }
.hct-hero-title{ margin:0; font-weight:700; }
.hct-hero-sub{ margin:8px 0 0; color:var(--muted); }

.hct-segment{ display:flex; gap:4px; background:#f3f4f6; padding:4px; border-radius:999px; }
.hct-segment button{ padding:6px 12px; border-radius:999px; border:1px solid transparent; background:transparent; cursor:pointer; }
.hct-segment button.active{ background:#fff; border-color:#e5e7eb; box-shadow:var(--shadow); }

.hct-leaderboard-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; }
.hct-row{ display:grid; grid-template-columns:36px 1fr auto auto auto auto; gap:10px; align-items:center; padding:8px 10px; background:#fff; border-radius:12px; border:1px solid #eef2f7; }
.hct-cell.muted{ color:var(--muted); }
.hct-cell.name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hct-avatar{ width:64px; height:64px; border-radius:50%; background:#e5e7eb center/cover no-repeat; box-shadow: inset 0 0 0 1px #e5e7eb; }
.hct-avatar.small{ width:32px; height:32px; }
.hct-profile-header{ display:flex; gap:16px; align-items:center; margin-bottom:10px; }

.hct-people{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media(min-width:700px){ .hct-people{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hct-person{ text-align:center; background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:12px; cursor:pointer; }
.hct-person:hover{ box-shadow: var(--shadow); }
.hct-muted{ color:var(--muted); }

.trend.up{ color:#16a34a; } .trend.down{ color:#C61F4A; } .trend.neutral{ color:#6b7280; }

.hct-badge{ display:inline-block; font-size:12px; margin:4px 6px 0 0; padding:6px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; }
.hct-badges{ margin-top:6px; }
.hct-badges-row{ display:flex; gap:6px; justify-content:flex-end; }