.hkct-card{border:1px solid #e5e5e5;border-radius:8px;padding:16px;margin:16px 0;background:#fff}
.hkct-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.hkct-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#f2f2f2;font-weight:600;font-size:12px}
.hkct-ref{font-weight:600}
.hkct-link{margin-left:auto}
.hkct-time{font-size:12px;color:#666}
.hkct-desc{font-size:14px}
.hkct-code{font-size:12px;color:#999;text-align:right}
.hkct-muted{color:#777;font-size:13px}
.hkct-page{max-width:920px;margin:0 auto;padding:16px}
.hkct-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    margin-left: 10px;
    color: #fff;
}

.hkct-wrapper {
  max-width: 720px;
  margin: 30px auto;
  padding: 10px 0;
}

.hkct-header {
  margin-bottom: 2rem;
  text-align: center;
}

.hkct-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
}

.hkct-tracking-id {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Timeline */

.hkct-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.hkct-item {
  display: flex;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2.5rem;
}

.hkct-item:last-child {
  padding-bottom: 0;
}

.hkct-item::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 52px;
  width: 2px;
  height: calc(100% - 52px);
  background: #e2e8f0;
}

.hkct-item.completed::before {
  background: #10b981;
}

.hkct-item:last-child::before {
  display: none;
}

/* ICON */

.hkct-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hkct-icon svg {
  width: 24px;
  height: 24px;
}

.hkct-item.completed .hkct-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 14px rgba(16,185,129,0.25);
}

.hkct-item.active .hkct-icon {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}

/* CONTENT */

.hkct-content {
  flex: 1;
}

.hkct-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hkct-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

.hkct-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.hkct-item.completed .hkct-badge {
  background: rgba(16,185,129,0.1);
  color: #059669;
}

.hkct-item.active .hkct-badge {
  background: rgba(99,102,241,0.1);
  color: #4f46e5;
}

.hkct-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 0.3rem;
}

.hkct-time {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.5rem;
}